<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
    <div id="app">

        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal"
            @click="modification">
            修改
        </button>
        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel" style="margin-left: 190px;">添加图书</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <label for="exampleInputEmail1" class="form-label">图书名称</label>
                        <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
                            placeholder="请输入书籍名称" v-model="bookname">
                        <label for="exampleInputPassword1" class="form-label">图书作者</label>
                        <input type="text" class="form-control" id="exampleInputPassword1" placeholder="请输入书籍作者"
                            v-model="bookauthor">
                    </div>

                    <div class="modal-footer">

                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"
                            @click="close">关闭</button>
                        <button type="button" class="btn btn-primary" @click="save">保存</button>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <script>
        const { createApp } = Vue
        createApp({
            data() {
                return {
                    book: [],
                    bookname: '',
                    bookauthor: ''
                }
            },
            created() {
                // 从本地存储中获取数据
                const storedBook = localStorage.getItem('book');
                if (storedBook) {
                    this.book = JSON.parse(storedBook);
                }
            },
            methods: {
                modification() {
                    const myModal = new bootstrap.Modal(document.getElementById('exampleModal'));
                    myModal.show();
                    console.log('修改');
                },
                save() {
                    // 使用 this 来引用 data 中的属性
                    const newBook = {
                        bookname: this.bookname,
                        bookauthor: this.bookauthor
                    };
                    this.book.push(newBook);
                    // 保存到本地存储
                    localStorage.setItem('book', JSON.stringify(this.book));
                    console.log('保存成功', this.book);
                    // 清空输入框
                    this.bookname = '';
                    this.bookauthor = '';
                },
                close() {
                    const myModal = bootstrap.Modal.getInstance(document.getElementById('exampleModal'));
                    myModal.hide();
                }
            }
        }).mount('#app')
    </script>
</body>

</html>